<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <script src="./js/jquery-photo-gallery/jquery.js"></script>
  <script src="./js/jquery-photo-gallery/jquery.photo.gallery.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
    }

    img {
      max-width: 300px;
      max-height: 200px;
    }
  </style>
</head>

<body>
  <h2>双击图片显示大图</h2>
  <div class="gallerys">
    <img class="gallery-pic" src="./img/01.jpg" ondblclick="$.openPhotoGallery(this)" />
    <img class="gallery-pic" src="./img/01.jpg" ondblclick="$.openPhotoGallery(this)" />
    <img class="gallery-pic" src="./img/01.jpg" ondblclick="$.openPhotoGallery(this)" />
    <img class="gallery-pic" src="./img/01.jpg" ondblclick="$.openPhotoGallery(this)" />
  </div>
</body>
</html>